C4Component
  title 「哦我的工具箱（oh-my-kit）」应用逻辑架构图
  
  Person_Ext(anonymousUser, "用户")
  Person(user, "注册用户")           
  Person(adminUser, "管理员")

  System_Boundary(ohMyKit, "哦我的工具箱") {
    Container(spa, "单页应用")

    Container_Boundary(spaBoundary, "单页应用") {
      Component(layout, "布局")

      Container_Boundary(features, "功能") {  
        Component(home, "首页")
        Component(example, "例子")
        Component(kanban, "我的看板")
        Component(otherFeatures, "...")
      }

      Container_Boundary(common, "公共") {
        Component(nav, "导航")
        Component(userManagement, "用户管理")
        Component(errorHandling, "错误处理")
        Component(otherCommon, "...")
      }

      Rel(layout, home, "路由")
      Rel(layout, example, "路由")
      Rel(layout, kanban, "路由")
      Rel(layout, nav, "使用")
      Rel(layout, userManagement, "使用")
      Rel(layout, errorHandling, "使用")
      Rel(kanban, userManagement, "使用", "管理员")
    }

    Container_Boundary(services, "服务") {
      Component(mockServices, "模拟服务")

      Container_Boundary(remoteServices, "远程服务") {
        Component(helloService, "Hello服务")
      }

      ComponentDb(database, "数据存储")      
    }
    
    BiRel(anonymousUser, spa, "访问", "浏览器")
    BiRel(user, spa, "访问", "浏览器")
    BiRel(adminUser, spa, "访问", "浏览器")

    Rel(spa, layout, "加载")

    Rel(example, helloService, "远程调用", "HTTPS GET")

    UpdateRelStyle(example, helloService, $lineColor="purple")
  }

  UpdateLayoutConfig($c4ShapeInRow="10", $c4BoundaryInRow="1")
